<template>
	<view class="callingCard ">
		<view class="share">
			分享
		</view>
		<view class="annotation">
			注：老板对找活者满意，可以直接与他联系以及点赞或转发
		</view>
		<view class="header">
			基础信息
		</view>
		<view class="card">
			<view class="message">
				<image src="../../static/logo.png"></image>
				<view class="mesg">
					<view class="name">名字</view>
					<view class="details">
						<span class="sex">女</span>
						<span class="age">36岁</span>
						<span class="rece">汉族</span>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="">
					<image style="width: 40rpx; height: 40rpx;" src="../../static/原点.png"></image>
					<view style="border: solid 1px #C8C9CC;" class="wire"></view>
				</view>
				<view class="datum">
					<view class="head">手机</view>
					<view>:</view>
					<view class="phone">12345678911</view>
					<view class="examine">查看找活电话</view>
					<view v-if="show" class="operate">
						<view class="dial">点击拨打</view>
						<view class="complaint">投诉</view>
					</view>
				</view>
				<image style="width: 40rpx; height: 40rpx;" src="../../static/原点.png"></image>
				<view style="border: solid 1px #C8C9CC;" class="wire"></view>
				<view class="kind">
					<view class="head">工种</view>
					<view>:</view>
					<view style="width: 400rpx;display: flex;flex-wrap:wrap; ">
						<view v-for="(item,index) in items" :key="index">
							<view class="label">材料员/资料员</view>
						</view>
					</view>
				</view>
				<image style="width: 40rpx; height: 40rpx;" src="../../static/原点.png"></image>
				<view style="border: solid 1px #C8C9CC;" class="wire"></view>
				<view class="general">
					<view class="head">熟练度</view>
					<view>:</view>
					<view class="mesg">中级工</view>
				</view>
				<image style="width: 40rpx; height: 40rpx;" src="../../static/原点.png"></image>
				<view style="border: solid 1px #C8C9CC;" class="wire"></view>
				<view class="general ">
					<view class="head">人员构成</view>
					<view>:</view>
					<view class="mesg">个人</view>
				</view>
				<image style="width: 40rpx; height: 40rpx;" src="../../static/原点.png"></image>
				<view style="border: solid 1px #C8C9CC;" class="wire"></view>
				<view class="general ">
					<view class="head">期望地区</view>
					<view>:</view>
					<view class="mesg">北京北京北京北京北京北京</view>
				</view>
				<image style="width: 40rpx; height: 40rpx;" src="../../static/原点.png"></image>
				<view style="border: solid 1px #C8C9CC;" class="wire"></view>
				<view class="tag">
					<view class="head">标签</view>
					<view>:</view>
					<view style="width: 400rpx;display: flex;flex-wrap:wrap; ">
						<view v-for="(item,index) in items" :key="index">
							<span class="mesg">任劳任怨</span>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="self-introduction">自我介绍</view>
		<view class="text">从事电工行业</view>
		<view class="self-introduction">项目经验</view>

		<view class="experience">
			<view class="head">
				<image src="../../static/项目.png"></image>
				<view class="title">
					人民日报
				</view>
			</view>
			<view class="all">

				<view class="time">
					2018-10-22
					<span style="padding: 0 6rpx;">-</span>
					2019-08-01 北京
				</view>
				<view class="explain">
					因为公司小一人身兼数职
				</view>
				<view class="images">
					<image src="../../static/logo.png" mode=""></image>
					<image src="../../static/logo.png" mode=""></image>
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
			<view v-if="true" class="more">
				<view @click="goProjectExperience" class="more-image">
					更多项目经验
					<image src="../../static/下箭头白.png"></image>
				</view>
			</view>
		</view>

		<view class="self-introduction">职业技能</view>
		<view class="experience">
			<view class="head">
				<image src="../../static/项目.png"></image>
				<view class="title">
					压力内容器过期
				</view>
			</view>
			<view class="all">
				<view class="time">
					2018-10-22
				</view>
				<view class="images">
					<image src="../../static/logo.png" mode=""></image>
					<image src="../../static/logo.png" mode=""></image>
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
			<view v-if="true" class="more">
				<view @click="goCertificate" class="more-image">
					更多技能证书
					<image src="../../static/下箭头白.png"></image>
				</view>
			</view>
		</view>
		<view class="nearby">
			<view class="left"></view>
			附近适合您的工人
			<view class="right"></view>
		</view>
		<view v-for="(item,index) in dataList" :key="index">
			<view @click="goCallingCard" class="">
				<my-personage :people="item"></my-personage>
			</view>
		</view>
		<view style="text-align: center; color: #007AFF; font-size: 34rpx;line-height: 60rpx;background: #FFFFFF;">
			查看更多找活信息
		</view>
		<view class="foot">
			<view @click="praise" class="operate">
				<image v-if="!pra" src="../../static/找活名片_03.jpg" mode=""></image>
				<image v-if="pra" src="../../static/找活_03.jpg" mode=""></image>
				赞
			</view>
			<view class="operate">
			<image src="../../static/找活名片_03-02.jpg" mode=""></image>
				分享
			</view>
			<view class="operate">
				<image src="../../static/找活名片_03-03.jpg" mode=""></image>
				<image v-if="false" src="../../static/找活_03-02.jpg" mode=""></image>
				收藏                                                                                         
			</view>
		</view>
	</view>
</template>

<script>
	import myPersonage from '../../components/personage.vue'
	export default {
		data() {
			return {
				items: [1, 2, 3],
				pra:false,
				dataList: [{
						id: 1,
						image: "",
						name: "黎先生",
						sex: "女",
						age: "42",
						label: ["尽职尽责", "团结协作", "团结协作"],
						typeJob: ["小工/杂工/临时工"],
						text: "测试正文",
						address: "福建厦门",
						profession: "2020-10-25 08:55",
					},
					{
						id: 2,
						image: "",
						name: "",
						sex: "女",
						age: "42",
						label: "",
						nation: "汉族",
						seniority: "工龄15年以上",
						nature: "个人",
						typeJob: ["小工/杂工/临时工"],
						text: "测试正文测试正文测试正文测试正文测试正文测试正文测试正文",
						address: "福建厦门",
						profession: "2020-10-25 08:55",
					}
				]
			}
		},
		components:{
			'myPersonage':myPersonage
		},
		methods: {
			praise(){
				this.pra = this.pra ? false : true
			},
			goProjectExperience() {
				uni.navigateTo({
					url: 'projectExperience'
				})
			},
			goCertificate() {
				uni.navigateTo({
					url: 'certificate'
				})
			},
			goCallingCard(){
				uni.navigateTo({
					url:'callingCard'
				})
			}
		},
		onNavigationBarButtonTap(){
			console.info("自定义")
		}

	}
</script>

<style lang="scss" scoped>
	.callingCard {
		background: #dfe5ec;
		margin-bottom: 100rpx;
		position: relative;
		.share {
			position: absolute;
			top: -20rpx;
			right: 20rpx;
			z-index: 10;
			color: #FFFFFF;
		}
		.annotation {
			background: #FFFFFF;
			color: #ED6A0C;
		}

		.header {
			text-align: center;
			font-size: 32rpx;
			line-height: 60rpx;
			color: #6d6d6d;
		}

		.card {
			background: #FFFFFF;
			padding: 40rpx 20rpx 20rpx 40rpx;

			.message {
				display: flex;
				align-items: center;
				line-height: 50rpx;

				image {
					border-radius: 999rpx;
					width: 120rpx;
					height: 120rpx;
					margin-right: 30rpx;
				}

				.details {
					color: #6d6d6d;

					.sex,
					.age,
					.rece {
						margin-right: 20rpx;
					}
				}
			}

			.content {
				padding: 20rpx;

				.datum {
					display: flex;
					font-size: 32rpx;

					.head {
						text-align-last: justify;
						width: 140rpx;
					}

					.phone {
						color: #6d6d6d;
						margin: 0 20rpx;
					}

					.examine {
						color: #FFFFFF;
						background: #007AFF;
						line-height: 50rpx;
						padding: 0 20rpx;
						border-radius: 10rpx;
					}
				}

				.kind {
					display: flex;
					font-size: 32rpx;
					line-height: 50rpx;

					.head {
						text-align-last: justify;
						width: 140rpx;
					}

					.label {
						background: #DCDFE6;
						color: #6d6d6d;
						margin: 0 20rpx 10rpx 20rpx;
					}
				}

				.general {
					display: flex;
					font-size: 32rpx;
					line-height: 50rpx;

					.head {
						text-align-last: justify;
						width: 140rpx;
					}

					.mesg {
						margin: 0 20rpx;
						color: #6d6d6d;
					}
				}

				.tag {
					display: flex;
					font-size: 32rpx;
					line-height: 50rpx;

					.head {
						text-align-last: justify;
						width: 140rpx;
					}

					.mesg {
						margin: 0 10rpx;
						border: solid 1px #007AFF;
						color: #007AFF;
						border-radius: 10rpx;
						padding: 0 6rpx;
					}
				}
			}
		}

		.self-introduction {
			text-align: center;
			color: #6d6d6d;
			font-size: 32rpx;
			line-height: 80rpx;
		}

		.text {
			padding: 20rpx;
			white-space: pre;
			background: #FFFFFF;
		}

		.experience {
			padding: 20rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;
			.head {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}

				.title {
					margin-bottom: 6rpx;
				}
			}

			.all {
				border-left: solid 1px #AAAAAA;
				padding: 0 20rpx;
				margin-bottom: 26rpx;
				margin-left: 12rpx;

				.time {
					color: #6d6d6d;
					margin: 6rpx;
				}

				.explain {
					color: #6d6d6d;
					margin: 6rpx;
				}

				.images {
					display: flex;
					flex-wrap: wrap;

					image {
						margin-right: 40rpx;
						margin-bottom: 20rpx;
						width: 160rpx;
						height: 160rpx;
						border-radius: 20rpx;
					}
				}
			}

			.more {
				display: flex;
				justify-content: center;
				color: #FFFFFF;

				.more-image {
					width: auto;
					display: flex;
					align-items: center;
					line-height: 60rpx;
					padding: 0 20rpx;
					background: #007AFF;
					border-radius: 10rpx;
					letter-spacing: 4rpx;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}

			}
		}
		.nearby{
			display: flex;
			background: #FFFFFF;
			align-items: center;
			justify-content: space-around;
			line-height: 80rpx;
			font-size: 34rpx;
			padding: 0 10rpx;
			margin-bottom: 20rpx;
			.left,.right{
				width: 30vw;
				border-bottom: solid 1px #C8C9CC;
			}
		}
		.foot{
			width: 100vw;
			display: flex;
			background: #FFFFFF;
			justify-content: space-between;
			padding: 20rpx 60rpx;
			position: fixed;
			bottom: 0;
			border-top: solid 1px #c5c5c5;
			.operate{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				image{
					margin-right: 10rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>
